<template>
  <PageHeader name="地区管理" />
  <el-row>
    <el-col :span="10">
      <el-scrollbar class="custom-tree-container" height="820px">
        <el-tree v-loading="loading" :data="mapAnchorList" node-key="id" default-expand-all
          :expand-on-click-node="false" :highlight-current="true">
          <template #default="{ node, data }">
            <div class="custom-tree-node" @click="flytoLatlng(node, data)">
              <span>{{ data.name }}</span>
              <div>
                <el-button type="primary" @click="editTree(node, data)" :icon="Edit" link />
                <el-button type="primary" @click="appendTree(node, data)" :icon="Plus" link />
                <el-button type="danger" @click="deleteTree(node, data)" :icon="Close" link />
              </div>
            </div>
          </template>
        </el-tree>
      </el-scrollbar>
    </el-col>
    <el-col :span="1">
    </el-col>
    <el-col :span="12" class="home-view">
      <div class="map-layer" id="map"></div>
    </el-col>
  </el-row>



</template>

<script lang="ts" setup>
import 'leaflet/dist/leaflet.css'
import { ref, onMounted } from 'vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import PageHeader from '@/components/layout/PageHeader.vue'
import { useRoute } from 'vue-router'
import { v4 as uuidv4 } from 'uuid';
import { getMapAnchorList } from '@/js/api'
import { Close, Edit, Plus } from '@element-plus/icons-vue'
import { useHomeStore } from '@/stores/home'
import { storeToRefs } from 'pinia'
import { globalDataInst } from '@/js/global-data'
import { MapManager } from '@/js/map-manager'
import { EventManager } from '@/js/event-manager'
import * as L from 'leaflet';
onMounted(() => {
  init()
})
const store = useHomeStore()
const { setMapAnchorList } = store
const { mapAnchorList } = storeToRefs(store)
const route = useRoute()
const loading = ref(true)
EventManager.on('SavePointsEdit', onSavePointsEdit)

function onSavePointsEdit(latlng: L.LatLng, name: string) {
  //TODO 保存接口
  //展示 重刷
  ElMessage({
    message: `${name}：${latlng.lat + " | " + latlng.lng}  保存成功`,
    type: 'success',
  })
}
function flytoLatlng(node: any, data: any) {
  if (data.parent_id === "0") {
    globalDataInst.mapManager.flyTo([data.lat, data.lng], 4)

  } else {
    globalDataInst.mapManager.flyTo([data.lat, data.lng], 7)

  }
}
const mapId = (route.params.id ??= '') !== '' ? (route.params.id + '') : 'ys'
console.log("🚀 ~ mapId:", mapId)

async function initMapAnchorList() {
  const res = await getMapAnchorList(mapId)
  loading.value = false
  setMapAnchorList(res.data)
}
async function init() {
  initMapAnchorList()
  globalDataInst.mapManager = new MapManager('map', mapId)
  globalDataInst.mapManager.setMapAnchorList(store.mapAnchorList)
  globalDataInst.mapManager.renderAreaNames()
  globalDataInst.mapManager.enableClickDebug()
}
interface Tree {
  id: string
  name: string
  lat: number
  lng: number
  children?: Tree[]
}
const editTree = (node: Node, data: Tree) => {
  flytoLatlng(node, data)
  globalDataInst.mapManager.handleAreaNames(data.name, L.latLng(data.lat, data.lng))
}
const appendTree = (node: Node, data: Tree) => {
  flytoLatlng(node, data)
  globalDataInst.mapManager.handleAreaNames("", L.latLng(data.lat, data.lng))
}
const deleteTree = (node: Node, data: Tree) => {
  flytoLatlng(node, data)
  ElMessageBox.confirm(
    '是否删除节点:' + data.name,
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  & .el-button {
    padding-right: 0;
    margin-left: 0.05rem !important;
  }
}

.map-layer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
